<template>
  <div class="form-container">
    <div class="top">
      <div style="flex-shrink: 0;"><Title :element="element" isTable /></div>
      <div v-if="element.options.required" class="is-required">*</div>
      <div v-if="element.options && element.options.tip" class="tip">{{ element.options.tip }}</div>
      <div class="flex"/>
      <PlainCreateBtn>添加</PlainCreateBtn>
      <el-button size="small" class="delete-btn">删除</el-button>
    </div>
    <u-table
      :data="[]"
      :row-height="49"
      :border="true"
      beautify-table
      header-drag-style
      class="fb-table todo-table"
      empty-text="暂无数据"
      fit
    >
      <u-table-column align="center" type="selection" width="50" fixed />
      <u-table-column v-for="name in columnName" :key="name" :label="name" align="left" />
    </u-table>
  </div>
</template>

<script>
/**
 * 关联审批 - 只用作预览
 */
import Title from './Title';
export default {
  name: 'BanAssociatedView',
  components: { Title },
  props: {
    element: {
      type: Object,
      default: null
    }
  },
  computed: {
    columnName() {
      return ['序号', '任务类型', '摘要', '发起人', '发起时间', '流程状态', '操作'];
    }
  }
};
</script>

<style lang="scss" scoped>
.form-container {
  padding: 0 12px;
  .top {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
  }
  .flex {
    flex:1;
  }
  .delete-btn {
    color: #666666;
    border-color: #ddd;
    background-color: #fff;
    padding: 7px 8px;
  }
}
.is-required {
  color: #F56C6C;
  margin-left: 3px;
}
.tip {
  color: #999;
  font-size: 12px;
  margin-left: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
</style>
